import React, {useState} from 'react';
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import {TextField, Tooltip} from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faInfoCircle} from "@fortawesome/free-solid-svg-icons/faInfoCircle";
import {selectDeselectAnalysisMethodParams} from "../../../../../../../redux/reducers/editor";
import {useDispatch} from "react-redux";
import HelpIcon from "@material-ui/icons/Help";

export default function TextBox(props) {
  // Props
  const {selectedAnalyticsMethodParams, paramData} = props;

  // Local constants
  const dispatch = useDispatch();
  const [selection, setSelection] = useState({
    textInput: paramData.value ? paramData.value : "",
  });

  const handleTextInput = (e) => {
    setSelection({
      ...selection,
      textInput: e.target.value,
    });
    let newSelectedAnalyticsMethodParams = selectedAnalyticsMethodParams;
    newSelectedAnalyticsMethodParams.forEach(param => {
      if (param.id === paramData.id) {
        param.value = e.target.value;
      }
    })
    dispatch(selectDeselectAnalysisMethodParams(newSelectedAnalyticsMethodParams));
  };

  return (
    <>
      <Grid container justify="space-between" alignItems="flex-end">
        <Grid item xs>
          <Grid container alignItems="center">
            <Grid item>
              <Typography >{paramData.title}</Typography>
            </Grid>
            <Tooltip arrow placement="right-start" title={
              <Typography >{paramData.description}</Typography>
            }>
              <IconButton> <HelpIcon /> </IconButton>
            </Tooltip>
          </Grid>
        </Grid>
        <Grid item xs>
          <TextField
            fullWidth
            label={"Input value"}
            value={selection.textInput}
            type={paramData.dataType === "INTEGER" ? "number" : "string"}
            size="small"
            onChange={handleTextInput}
          />
        </Grid>

      </Grid>
    </>
  );
}
